<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        margin: 0;
        box-sizing: border-box;
        display: grid;
        width: 100%;
        grid-template-columns: 200px 1fr 3fr;
        grid-gap: 10px 20px;
        grid-template-rows: 100px 200px;
        grid-template-areas:
                             "sidebar content content"
                             ". header header";
    }
    .sidebar{grid-area: sidebar;background-color: aqua;transform: translate(100px);}
    .content{grid-area: content;background-color: aqua;}
    .header{grid-area: header;background-color: aqua;}
    /* .one{background-color: aqua;}
    .two{background-color: red;}
    .three{background-color: gold;}
    .four{background-color: green;}
    .five{background-color: blue;}
    .six{background-color:cadetblue;} */
</style>
<body>
    <div class="container">
        <div class="header">header</div>
        <div class="sidebar">sidebar</div>
        <div class="content">content</div>
        <!-- <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
        <div class="four">four</div>
        <div class="five">five</div>
        <div class="six">six</div> -->
    </div>
    
</body>
</html>